<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>数据</el-breadcrumb-item>
        <el-breadcrumb-item>产品</el-breadcrumb-item>
        <el-breadcrumb-item>概况</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <el-form class="formEle" :model="seachData" label-width="auto">
        <el-form-item label="日期">
          <el-date-picker
            v-model="seachData.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="渠道号" class="el-col-10">
          <el-input v-model="seachData.channelId" placeholder="查询多个以逗号分割"></el-input>
        </el-form-item>
        <!-- <el-form-item label="用户群组">
          <el-select v-model="seachData.group_id" placeholder="请选择">
            <el-option
              v-for="item in listSelect"
              :key="item.value"
              :label="item.group_name"
              :value="item.group_id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div class="buttonContent">
        <el-button type="primary" @click="searchChange">搜索</el-button>
        <el-button type="" @click="resetBtn">清空</el-button>
      </div>
      <!-- {{option.column}} -->
      <!-- {{datas}} -->
      <avue-crud
        :key="indexOde"
        ref="crud"
        :data="datas"
        v-model="form"
        :option="option"
        :page.sync="page"
        @current-change="currentChange"
         @size-change="sizeChange"
        @refresh-change="refreshChange"
        @search-reset="from = {}"
        @search-change="searchChange"
      >
        <!-- @on-load="getList" -->
        <template slot="sourceDnInfo" slot-scope="scope">
          <div>
            <p>
              充：{{ scope.row.sourceDnInfo[0].recharge || 0 }}<br />
              回：{{ scope.row.sourceDnInfo[0].cost_recovery_rate || 0 }}<br />
              增：{{ scope.row.sourceDnInfo[0].increase_rate || 0 }}<br />
              <!-- 币：{{ scope.row.sourceDnInfo[0].totalGc }}<br />
              人：{{ scope.row.sourceDnInfo[0].totolUsers }}<br /> -->
            </p>
            <!-- <p>
              充：{{ scope.row.dayInfo[0].totalTop }}<br />
              回：<span
                v-if="scope.row.dayInfo[0].totalTop == 0 || scope.row.cost == 0"
                >0</span
              ><span v-else
                >{{
                  (scope.row.dayInfo[0].totalTop / scope.row.cost).toFixed(2)
                }}%</span
              ><br />
              增：0<br />
              币：{{ scope.row.dayInfo[0].totalGc }}<br />
              人：{{ scope.row.dayInfo[0].totolUsers }}<br />
            </p> -->
          </div>
        </template>

        <!-- <div v-for="(item, jndex) in datas" :key="jndex">
          <div slot-scope="scope" :slot="'date_' + jndex">
            <p>
              充：{{ scope.row.dayInfo[jndex - 1].totalTop }}<br />
              回：<span
                v-if="
                  scope.row.dayInfo[jndex - 1].totalTop == 0 ||
                  scope.row.cost == 0
                "
                >0</span
              ><span v-else>{{
                (
                  scope.row.dayInfo[jndex - 1].totalTop / scope.row.cost
                ).toFixed(2)
              }}</span
              ><br />
              增：<span
                v-if="
                  'scope.row.dayInfo[jndex - 1].totalTop ==0||scope.row.cost==0'
                "
                >0</span
              ><span v-else>{{
                (
                  scope.row.dayInfo[jndex - 1].totalTop / scope.row.cost
                ).toFixed(2) -
                (
                  scope.row.dayInfo[jndex - 2].totalTop / scope.row.cost
                ).toFixed(2)
              }}</span
              ><br />
              币：{{ scope.row.dayInfo[jndex - 1].totalGc }}<br />
              人：{{ scope.row.dayInfo[jndex - 1].totolUsers }}<br />
              
            </p>
          </div>
        </div> -->
        <!-- 平均回：{{scope.row.totalRmb/scope.row.cost}}<br />
              平均增：<br /> -->
        <!-- <template v-for="item in data">
                  <a-sub-menu :key="item.title">
                      <span slot="title">
                          <span>{{item.title}}</span>
                      </span>
                      <template v-for="c in item.children">
                          <a-menu-item :key="c.title">{{c.title}}</a-menu-item>
                      </template>
                  </a-sub-menu>
              </template> -->

        <div
          v-for="(item, jndex) in 61"
          :key="jndex"
          :slot="'date_' + jndex"
          slot-scope="scope"
        >
          <p>
            充：<span v-if="scope.row.sourceDnInfo[jndex - 1]">{{
              scope.row.sourceDnInfo[jndex - 1].recharge
            }}</span
            ><span v-else>0</span>
            <br />
            回：<span v-if="scope.row.sourceDnInfo[jndex - 1]">{{
              scope.row.sourceDnInfo[jndex - 1].cost_recovery_rate
            }}</span
            ><span v-else>0.00%</span>
            <br />
            增：<span v-if="scope.row.sourceDnInfo[jndex - 1]">{{
              scope.row.sourceDnInfo[jndex - 1].increase_rate
            }}</span
            ><span v-else>0.00%</span>

            <!-- <br />
            币：<span v-if="scope.row.sourceDnInfo[jndex - 1]">{{
              scope.row.sourceDnInfo[jndex - 1].totalGc
            }}</span
            ><span v-else>0</span><br />
            人：<span v-if="scope.row.sourceDnInfo[jndex - 1]">{{
              scope.row.sourceDnInfo[jndex - 1].totolUsers
            }}</span
            ><span v-else>0</span><br /> -->
          </p>
        </div>

        <!-- 回本率（%） -->
        <template slot="costRate" slot-scope="scope">
          <div v-if="scope.row.totalRmb == 0 || scope.row.cost == 0">0</div>
          <div v-else>
            {{ towNumber(scope.row.totalRmb / scope.row.cost) }}
          </div>
        </template>
        <!-- 新增用户成本 -->
        <template slot="add_user_count" slot-scope="scope">
          <div v-if="scope.row.cost == 0 || scope.row.totalUser == 0">0</div>
          <div v-else>
            {{ towNumber(scope.row.cost / scope.row.totalUser) }}
          </div>
        </template>
        <!-- 充值用户成本 -->
        <template slot="chapter_id_count" slot-scope="scope">
          <div v-if="scope.row.cost == 0 || scope.row.topUsers == 0">0</div>
          <div v-else>
            {{ towNumber(scope.row.cost / scope.row.topUsers) }}
          </div>
        </template>
        <!-- 自定义按钮 -->
        <template slot-scope="" slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-download"
            size="small"
            plain
            @click="handleExcel()"
            >导出Excel</el-button
          >

        <!-- <download-excel
              class = "export-excel-wrapper"
              :data = "datas"
              :fields = "json_fields"
              name = "远程诊断报告导出.xls">
              <el-button type="primary" size="small">导出EXCEL</el-button>
        </download-excel> -->
        </template>

        <template slot-scope="scope" slot="app_version">
          <!-- v-if="scope.row.$index != 0" -->
          <div class="slotMenu">
            <el-input-number
              v-if="eidtNumBtrue == scope.row.$index ? true : false"
              v-model="scope.row.cost"
              :precision="2"
              :step="1"
            ></el-input-number>
            <!-- v-else  -->
            <span
              style="margin-right: 20px"
              v-if="eidtNumBtrue != scope.row.$index ? true : false"
              >{{ scope.row.cost }}</span
            >
            <el-button
              v-if="eidtNumBtrue == scope.row.$index ? true : false"
              type="primary"
              size="small"
              plain
              @click="sendData(scope)"
              >确定</el-button
            >
            <el-button type="primary" size="small" plain @click="editNum(scope)"
              >编辑</el-button
            >
          </div>
        </template>
        <template slot-scope="scope" slot="start_remain">
          {{ scope.row.start_remain }}%
        </template>
        <template slot-scope="scope" slot="add_remain">
          {{ scope.row.add_remain }}%
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { handleExcelCat } from "@/api/exportCommon";
import { common } from "@/api/cat/httpRequest";
import request from "axios";
import { catUrl } from "@/config/env";
import { appData as baseURL, getGroupList } from "@/api/cat/baseUrls";

export default {
  data() {
    return {
      seachData: {
        group_id: "",
        date: "",
        channelId: "",
      },
      value1: "",
      eidtCost: [],
      indexOde: "",
      numData: 1,
      eidtNumBtrue: "false",
      page: {
        pageNumber: 1,
        pageSize: 10,
      },
      type: true,
      datas: [],
      params: {
      
      },
      form: {},
      value: "",
      listSelect: [],
      default: {
        orderByList: "data&DESC,app_version&DESC,total_user_count&DESC",
      },
     
      // json_data: [
      //   {
      //     name: "损坏的组件一",
      //     city: "New York",
      //     country: "United States",
      //     birthdate: "1978-03-15",
      //     phone: {
      //       mobile: "1-541-754-3010",
      //       landline: "(541) 754-3010"
      //     }
      //   },
      //   {
      //     name: "损坏的组件二",
      //     city: "Athens",
      //     country: "Greece",
      //     birthdate: "1987-11-23",
      //     phone: {
      //       mobile: "+1 855 275 5071",
      //       landline: "(2741) 2621-244"
      //     }
      //   }
      // ],
       json_fields: {
        "日期": "date",    
        "渠道号": "channelId", 
        "成本": "cost", 
        "D1": {
          field:'dayInfo[0].totalTop',
          callback: value => {
            return `回 - ${value}`;
          }
        },
        // "头部-损坏区域代码": {
        //   field: "phone.landline",
        //             //自定义回调函数
        //   callback: value => {
        //     return `损坏区域代码 - ${value}`;
        //   }
        // }
      },
      option: {
        // index: true,
        // indexLabel: "编号",
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        excelBtn: false,
        menu: false,
        selection: true,
        border: true,
        column: [],
        // defaultSort:{
        //   order:'descending',
        //   prop:'statistics_date',
        // }
          
      },
      column: [
        {
          label: "日期",
          fixed: "left",
          align: "center",
          width: 90,
          prop: "statistics_date",
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd",
          search: false,
          sortable: true,
        },
        {
          label: "渠道号",
          fixed: "left",
          width: 100,
          prop: "channel_id",
          type: "inputs",
          search: false,
          sortable: true,
          align: "center",
        },
        // {
        //   label: "用户群组",
        //   prop: "group_id",
        //   type: "select",
        //   hide: true,
        //   search: false,
        //   dicUrl: `${catUrl}${getGroupList.getGroupList}`,
        //   dicFormatter: (res) => {
        //     return res.source;
        //   },
        //   props: {
        //     label: "group_name",
        //     value: "group_id",
        //   },
        //   editDisplay: false,
        // },
        {
          label: "成本",
          width: 280,
          fixed: "left",
          slot: true,
          prop: "app_version",
          type: "input",
          search: false,
          align: "center",
        },
        {
          label: "累计充值（元）",
          prop: "totalRecharge",
          type: "input",
          search: false,
          align: "center",
          renderHeader: (h, { column }) => {
            let l = column.label.length;
            let f = 16;
            column.minWidth = f * (l + 2);
            return [
              column.label,
              h(
                "el-tooltip",
                {
                  props: {
                    content: (function () {
                      let label = column.label;
                      return "从对应日期，到当前日期内，用户累计充值金额";
                    })(),
                    placement: "top",
                  },
                },
                [
                  h("span", {
                    class: {
                      "el-icon-question": true,
                    },
                  }),
                ]
              ),
            ];
          },
        },
        // {
        //   label: "回本率（%）",
        //   prop: "costRate",
        //   type: "input",
        //   slot: true,
        //   align: "center",
        //   renderHeader: (h, { column }) => {
        //     let l = column.label.length;
        //     let f = 16;
        //     column.minWidth = f * (l + 2);
        //     return [
        //       column.label,
        //       h(
        //         "el-tooltip",
        //       ),
        //     ];
        //   },
        // },
        {
          label: "新增用户数",
          prop: "newUserSum",
          type: "input",
          align: "center",
          renderHeader: (h, { column }) => {
            let l = column.label.length;
            let f = 16;
            column.minWidth = f * (l + 2);
            return [
              column.label,
              h(
                "el-tooltip",
              ),
            ];
          },
        },
        // {
        //   label: "新增用户成本",
        //   prop: "add_user_count",
        //   type: "input",
        //   slot: true,
        //   align: "center",
        //   renderHeader: (h, { column }) => {
        //     let l = column.label.length;
        //     let f = 16;
        //     column.minWidth = f * (l + 2);
        //     return [
        //       column.label,
        //       h(
        //         "el-tooltip",
        //       ),
        //     ];
        //   },
        // },
        {
          label: "充值人数",
          prop: "buy_user_sum",
          type: "input",
          align: "center",
          renderHeader: (h, { column }) => {
            let l = column.label.length;
            let f = 16;
            column.minWidth = f * (l + 2);
            return [
              column.label,
              h(
                "el-tooltip",
              ),
            ];
          },
        },
        {
          label: "充值次数",
          prop: "buy_user_count",
          type: "input",
          align: "center",
          renderHeader: (h, { column }) => {
            let l = column.label.length;
            let f = 16;
            column.minWidth = f * (l + 2);
            return [
              column.label,
              h(
                "el-tooltip",
              ),
            ];
          },
        },
        // {
        //   label: "充值用户成本",
        //   prop: "chapter_id_count",
        //   type: "input",
        //   slot: true,
        //   align: "center",
        //   renderHeader: (h, { column }) => {
        //     let l = column.label.length;
        //     let f = 16;
        //     column.minWidth = f * (l + 2);
        //     return [
        //       column.label,
        //       h(
        //         "el-tooltip",
        //       ),
        //     ];
        //   },
        // },
        {
          label: "D1",
          prop: "sourceDnInfo",
          width: 150,
          type: "input",
          renderHeader: (h, { column }) => {
            let l = column.label.length;
            let f = 30;
            column.minWidth = f * (l + 2);
            return [
              column.label,
              h( 
                "el-tooltip",
                {
                  props: {
                    content: (function () {
                      let label = column.label;
                      return (
                        <p>
                          充：新增用户在该日期的充值金额
                          <br />
                          回：截止该日期的累计回本率
                          <br />
                          增：相较前一天增长的回本率汇总
                          <br />
                          充：每日日期的Dn之和
                          <br />
                          平均回：每个日期的D1到Dn充值之和/每个日期的成本之和（未到达第n天的日期不计算）
                          <br />
                          平均增：每个日期的Dn充值之和/每个日期的成本之和（未到达第n天的日期不计算）
                          <br />
                          注：根据选定的日期实时计算，可能有所延迟";
                          <br />
                          币：对应日期内的新增用户，在Dn天的消耗总书币数
                          <br />
                          人：对应日期内的新增用户，在Dn天消耗过书币的总人数
                          <br />
                        </p>
                      );
                    })(),
                    placement: "top",
                  },
                },
                [
                  h("span", {
                    class: {
                      "el-icon-question": true,
                    },
                  }),
                ]
              ),
            ];
          },
          slot: true,
        },
      ],
    };
  },
  filters: {
    tofixeds(val) {
      return val.tofixed(2);
    },
  },
  methods: {
    // 分页
    currentChange(val){
      this.page.pageNumber = val;
      this.page.pageSize = 10;
      this.getList()
    },
    sizeChange(val) {
      // console.log(val)
      this.page.pageSize = val;
      this.page.pageNumber = 1;
      this.getList()
    },
    editNum(scope, index) {
      this.eidtNumBtrue = scope.row.$index;
    },
    async sendData(scope) {
      // console.log(scope,'--1')
      let params = {
        id:scope.row.id,
        statistics_date:scope.row.statistics_date,
        channel_id:scope.row.channel_id,
        cost:scope.row.cost,
      }
      let response = await common(
        '/inputOutput/update',
        params,
        null,
        'POST'
      )
      this.getList()
      this.eidtNumBtrue = "false";
      return
      // let params = {
      //   channelId: scope.row.channelId,
      //   statisticsDate: scope.row.date,
      //   totalUser: scope.row.totalUser,
      //   topUsers: scope.row.topUsers,
      //   cost: scope.row.cost,
      //   topNumbers: scope.row.topNumbers,
      //   createTime: "",
      // };
      request({
        method: "post",
        url: "http://101.201.44.1:9010/saveStatistics", ///saveStatistics
        data: {
          ...params
        },
      });
    },
    //获取成本字段数据
    defGetCost(items) {
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      let systemDate = date.year + "-" + date.month + "-" + date.date;
      let item = { statisticsDate: null, channel: null };
      request({
        method: "get",
        url: "http://101.201.44.1:9010/getStatistics",
        params: item,
      }).then((res) => {
        if (res.status == 200) {
          this.eidtCost = res.data;
          // this.getList()
          if(items != 1){
            this.statisticsList();
          }
        }
      });
    },
    async statisticsList() {
      let date = new Date().getTime();
      this.eidtCost.forEach((item, parentIndex) => {
        let params = {
          startTime: this.formatDate(item.statisticsDate),
          endTime: this.formatDate(date),
          channel: item.channelId,
          page: this.page
        };
        request({
          method: "GET",
          url: "http://101.201.44.1:9010/statkstkcal", ///saveStatistics
          params: params,
        }).then((res) => {
          if (res.status == 200) {
            //动态表头
            let item = [];
            let column = [];
            for (let i = 0; i < 59; i++) {
              let ele = {
                label: "D" + (i + 2),
                prop: "date_" + (i + 2),
                width: 150,
                type: "input",
                slot: true,
              };
              item.push(ele);
            }

            this.indexOde = 1;
            this.option.column = [...this.column, ...item];
            // console.log(this.option.column)
            //累计充值计算
            res.data.forEach((element, index) => {
              // if(item.date != element.date){
              let item = { totalRmb: 0, cost: element.cost, costRate: 1 }; //totalRmb 累计充值  cost：成本 costRate：回本率
              for (let i = 0; i < element.dayInfo.length; i++) {
                //计算累计充值
                item.totalRmb += element.dayInfo[i].totalTop;
              }
              element = Object.assign(element, item);
            });
            let arrList = [];
            res.data.forEach((items) => {
              if (this.formatDate(date) != items.date) {
                arrList.push(items);
              }
            });

            this.datas = this.datas.concat(arrList);
            // console.log(this.datas)
            this.$forceUpdate();
          }
        });
      });
    },
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d;
    },
    towNumber(val) {
      return parseFloat(val).toFixed(2);
    },
    formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
    //数据导出
  async handleExcel() {
      this.loading = true;
      require.ensure([], () => {
							const {
								export_json_to_excel
							} = require('../../../../excel/ExportExcel');
              this.datas.forEach((item,itemIndex) => {
                // 回本率
                if(item.totalRmb == 0 || item.cost == 0){
                  item.costRate = 0;
                }else {
                  item.costRate = this.towNumber(item.totalRmb / item.cost *1)
                }
                // 新增用户成本
                 if(item.cost == 0 || item.totalUser == 0){
                  item.add_user_count = 0;
                 }else {
                  item.add_user_count = this.towNumber(item.cost / item.totalUser *1)

                }
                // 充值用户成本
                if(item.cost == 0 || item.topUsers == 0){
                  item.chapter_id_count = 0;
                }else {
                  item.chapter_id_count = this.towNumber(item.cost / item.topUsers *1)
                }

                // if(item.cost == 0 || item.sourceDnInfo[1].totalTop == 0 ){
                  item.sourceDnInfo.forEach((items,index)=> {
                  if(item.sourceDnInfo[index]){
                     item[`date_${index+1}`] =
                      '充：' + (item.sourceDnInfo[index].recharge?item.sourceDnInfo[index].recharge:0) + ',' + '回：' +
                      (item.sourceDnInfo[index].cost_recovery_rate?item.sourceDnInfo[index].cost_recovery_rate:0) + ',' +
                      '增：' + (item.sourceDnInfo[index].increase_rate?item.sourceDnInfo[index].increase_rate:0)
                      ;
                  }

                })

                // }else {

                //      item.date_1 =
                //     '充：' + item.dayInfo[0].totalTop+ ',' + '回：' +
                //     this.towNumber(item.dayInfo[0].count*1/ item.cost*1) + "%" + ',' +
                //     '增：' + 0 + "%" + ',' +
                //     '币:' + item.dayInfo[0].totalGc + ',' +
                //     '人:' + item.dayInfo[0].totolUsers;
                //     item.dayInfo.forEach((itemss,index)=> {
                //       if(item.dayInfo[index+1]){
                //         let zeng = this.towNumber(item.dayInfo[index+1].count*1/ item.cost*1) - this.towNumber(item.dayInfo[index].count*1/ item.cost*1)
                //         item[`date_${index+2}`] =
                //           '充：' + item.dayInfo[index+1].totalTop+ ',' + '回：' +
                //           this.towNumber(item.dayInfo[index+1].count*1/ item.cost*1) + "%" + ',' +
                //           '增：' + zeng  + "%" +',' +
                //           '币:' + item.dayInfo[index+1].totalGc + ',' +
                //           '人:' + item.dayInfo[index+1].totolUsers;
                //       }
                //     })

                // }


              })

              // }
              // console.log(this.datas)
               let arr = []
                for(var i = 1; i< 61; i++ ){
                 arr.push('date_'+i)
                }
              //  console.log(arr)
              let title = [];
              this.option.column.forEach(item => {
               title.push(item.label)
              })
              const tHeader = title;

            // 	const filterVal = ['date', 'channelId', 'cost','totalRmb', 'costRate',
            //   'totalUser','add_user_count','topUsers','topNumbers',
            //   'chapter_id_count', ...arr
						// ];
            const filterVal = ['statistics_date', 'channel_id', 'cost','totalRecharge', 'newUserSum',
              'buy_user_sum','buy_user_count', ...arr
						];
							const list = this.datas; //把data里的tableData存到list
							const data = this.formatJson(filterVal, list);
							export_json_to_excel(tHeader, data, '投入产出');
						})




      //处理搜索条件
      // let params = { ...this.$refs.crud.searchForm };
      // if (params.statistics_date_search.length > 0) {
      //   params.statistics_date = `${
      //     params.statistics_date_search.length > 0
      //       ? "!<>!" +
      //         params.statistics_date_search[0] +
      //         "," +
      //         params.statistics_date_search[1]
      //       : ""
      //   }`;
      // }
      // delete params.statistics_date_search;

      //调用导出接口
      // handleExcelCat(
      //   this.$export,
      //   baseURL.appDataList,
      //   { ...params, ...this.default },
      //   "App数据概况",
      //   this.page.total,
      //   [...this.option.column],
      //   null
      // );
      this.loading = false;
    },

    /**获取列表 */
    async getList() {
      this.loading = true;

      this.datas = [];
      //发送请求获取数据
      // let date = new Date().getTime();
      let date = this.seachData.date?`!<>!${this.seachData.date[0]},${this.seachData.date[1]}`:''
      let channel_id = this.seachData.channelId?`$in${this.seachData.channelId}`:''
      let reg = new RegExp('，', 'g')
      channel_id = channel_id.replace(reg,',')
      console.log(this.seachData.date)
      this.params = {
          pageNum: this.page.pageNumber,
          pageSize: this.page.pageSize,
          orderByList: 'statistics_date&DESC',
          statistics_date: date,
          channel_id,
          // startTime: this.formatDate(date),
          // endTime: this.seachData.date ? this.seachData.date[0] : '2021-8-20',
          // groupId: this.seachData.group_id || 0,
          // channel: this.seachData.channelId ? this.seachData.channelId : null,
        };
      let response = await common(
        // baseURL.pageAndParam,
        "/inputOutput/pageAndParam",
        this.params,
        null,
        "POST"
      );
      let item = [];
      response.data.forEach((element, index) => {
          if(element.sourceDnInfo.length == 0){
            element.sourceDnInfo = [
                {
                  recharge: 0,
                  cost_recovery_rate: '0.00%',
                  increase_rate: '0.00%'
                }
            ]
            // let count = 0;
            //   element.sourceDnInfo.forEach((item, index) => {
            //       count += item.recharge;
            //       item.count = count;
            //   })
          }else{
            element.sourceDnInfo.map(l=>{
                l.cost_recovery_rate = l.cost_recovery_rate?(l.cost_recovery_rate*1).toFixed(2) +'%':'0.00%'
                l.increase_rate = l.increase_rate? (l.increase_rate=='-'?'-':(l.increase_rate*1).toFixed(2) +'%') :'0.00%'
            })

          }
      });
      for (let i = 0; i < 59; i++) {
        let ele = {
          label: "D" + (i + 2),
          prop: "date_" + (i + 2),
          width: 150,
          type: "input",
          slot: true,
        };
        item.push(ele);
      }
      this.indexOde = 1;
      this.option.column = [...this.column, ...item];
      this.datas = response.data;
      // console.log(this.datas,'---111')

      this.page.total = response.page.total;
      this.loading = false;

      return
      this.params = {
          startTime: this.formatDate(date),
          endTime: this.seachData.date ? this.seachData.date[0] : '2021-8-20',
          groupId: this.seachData.group_id || 0,
          channel: this.seachData.channelId ? this.seachData.channelId : null,
          pageNumber: this.page.pageNumber,
          pageSize: this.page.pageSize
        };
      request({
        method: "GET",
        url: "http://101.201.44.1:9010/statkstkcal", ///saveStatistics
        params: this.params,
      }).then((res) => {
        if (res.status == 200) {
          //动态表头
          let item = [];
          //  debugger
          console.log(res.data.statisticalList.length,'--2')
          //  for(var i = 0 ; i <= res.data.statisticalList.length; i++){
          //         res.data.statisticalList[i].sourceDnInfo = [
          //           {
          //             totalTop: 0,
          //             totalGc: 0,
          //             totolUsers: 0
          //           },
          //         ]

          //       }
            res.data.statisticalList.forEach((element, index) => {
              if(element.sourceDnInfo.length == 0){
                element.sourceDnInfo = [
                    {
                      totalTop: 0,
                      totalGc: 0,
                      totolUsers: 0
                    },
                    {
                      totalTop: 0,
                      totalGc: 0,
                      totolUsers: 0
                    },
                ]

                let count = 0;
                  element.sourceDnInfo.forEach((item, index) => {
                      count += item.totalTop;
                      item.count = count;
                  })
              }

            });
          // res.data[0].sourceDnInfo.length - 1
          for (let i = 0; i < 59; i++) {
            let ele = {
              label: "D" + (i + 2),
              prop: "date_" + (i + 2),
              width: 150,
              type: "input",
              slot: true,
            };
            item.push(ele);
          }
          this.indexOde = 1;
          this.option.column = [...this.column, ...item];

          // let newOjb = {}
          //累计充值计算
          res.data.statisticalList.forEach((element, index) => {
            let item = { totalRmb: 0, cost: element.cost, costRate: 1 }; //totalRmb 累计充值  cost：成本 costRate：回本率
            for (let i = 0; i < element.sourceDnInfo.length; i++) {
              //计算累计充值
              item.totalRmb += element.sourceDnInfo[i].totalTop;
            }
            element = Object.assign(element, item);
          });
          this.datas = res.data.statisticalList;
          this.page.total = res.data.total;
          console.log( this.datas ,'--3')
          // this.defGetCost(items);
        }
      });

      this.loading = false;
    } /**刷新 */,
    refreshChange() {
      this.getList();
    },
    //获取用户群组列表
    getGroupListFn() {
      let res = common(getGroupList.getGroupList, {}, null, "get");
      res.then((ele) => {
        this.listSelect = ele.data;
      });
    },
    resetBtn() {
      this.seachData = {
        group_id: "",
        date: "",
        channelId: "",
      };
    },
    /**搜索 */
    searchChange(params, done) {
      // params.statistics_date = `${
      //       params.statistics_date_searchs
      //         ? "!<>!" + params.statistics_date_search
      //         : ""
      //     }`;
      // delete params.statistics_date_search;
      // console.log(this.seachData.date)
      let paramsItem = {
        startTime: this.seachData.date ? this.seachData.date[0] : "",
        endTime: this.seachData.date ? this.seachData.date[1] : "",
        channel: this.seachData.channelId ? this.seachData.channelId : null,
        group_id: this.seachData.group_id,
      };
      this.params = paramsItem;
      this.indexOde = 2;

      // this.page.currentPage = 1;
      let status = '';
      // console.log(this.seachData.channelId)
      // console.log(this.seachData.group_id)
      if(!this.seachData.date[0] && !this.seachData.date[1] && this.seachData.channelId == '' && this.seachData.group_id == '') {
        status = 0;
      }else {
        status = 1;
      }
      console.log(status)
      this.getList();
      if (done) done();
    },
  },
  created() {},
  mounted() {
    // this.getGroupListFn();
    // this.defGetCost();
    this.getList();
  },
};
</script>
<style scoped>
.slotMenu {
  display: flex;
  justify-content: center;
  /* justify-content: space-around; */
}
.formEle {
  display: flex;
}
.formEle > div {
  margin-right: 20px;
}
.buttonContent {
  text-align: center;
}
</style>